<!--
 * @Author: windys
 * @Description: 兑换记录
 * @Date: 2022-03-23 10:34:18
-->
<template>
  <van-action-sheet v-model:show="show" title="兑换记录">
    <div class="content">
      <div v-if="list.length">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="title">
            <div class="name">兑换罗技（G）G304无线鼠标...</div>
            <div class="detail">3000积分+299元</div>
          </div>
          <div class="time">2021-11-21 12:21:15</div>
        </div>
      </div>
      <div v-else>
        <van-empty description="暂无兑换记录"/>
      </div>
    </div>
  </van-action-sheet>
</template>

<script>
import { defineComponent, ref, watch } from "vue";
export default defineComponent({
  setup() {
    const show = ref(false);
    const list = ref([]);
    watch(
      () => show.value,
      (v) => {
        if (v) {
          init();
        }
      }
    );
    const init = () => {};
    return {
      show,
      list,
    };
  },
});
</script>
<style scoped lang='scss'>
.content {
  min-height: 300px;
  .item {
    height: 50px;
    padding: 5px 8px;
    border-bottom: 1px solid #f1ecec;
    .title {
      display: flex;
      flex-direction: row;

      .name {
        font-size: 16px;
        width: 70%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #272e3e;
      }
      .detail {
        color: #81889b;
      }
    }
    .time {
      color: #b5b9c4;
      margin-top: 10px;
    }
  }
}
</style>